<template>
  <div>
    <van-nav-bar title="个人信息编辑" left-arrow @click-left="reFn">
        <template #right>
           <van-icon name="wap-home-o" size="18" @click="index"/>
        </template>
    </van-nav-bar>
    <div class="head_img">
        <img :src="user.head_img | joinPath" alt="">
        <van-uploader :after-read="afterRead" />
    </div>
    <van-cell title="昵称" is-link :value="user.nickname" @click="Dialog"/>
     <van-dialog v-model="show" @confirm="upbutton" title="编辑昵称" show-cancel-button :before-close="closeFn">
        <van-cell-group>
        <van-field
          v-model="nicheng"
          required
          label="昵称"
        />
        </van-cell-group>
    </van-dialog>
    <van-cell title="密码" is-link value="*******" @click="changePw"/>
    <van-dialog v-model="psc" @confirm="upPas" title="更改密码" show-cancel-button :before-close="closedFn">
        <van-field
         type="password"
          v-model="befroPs"
          required
          label="原密码"
        />
        <van-field
        type="password"
          v-model="newPs0"
          required
          label="新密码"
        />
        <van-field
        type="password"
          v-model="newPs1"
          required
          label="确认密码"
        />
    </van-dialog>
    <!-- <van-cell title="性别" is-link :value="user.gender==1?'男':'女'" @click="show1=!show1"/> -->
    <van-cell is-link title="性别" @click="show1 = true" :value="user.gender==1?'男':'女'"/>
    <van-action-sheet v-model="show1" :actions="actions" @select="onSelect" close-on-click-action/>
  </div>
</template>

<script>
import { userInfo, upload, userUpdate} from "../api/user"
export default {
    data(){
        return{
            user:{},
            id:localStorage.getItem('Account'),
            show1:false,
            show:false,
            nicheng:'',
            psc:false,
            befroPs:'',
            newPs0:'',
            newPs1:'',
            actions: [{ name: '男' }, { name: '女' }]
        }
    },
    methods:{
        onSelect(item) {
          // 默认情况下点击选项时不会自动收起
          // 可以通过 close-on-click-action 属性开启自动收起
          this.show = false;
        //   Toast(item.name);
            let gender=item.name==='男'?1:0
            let data={gender:gender}
            userUpdate(this.id,data).then(res=>{
                this.$toast.success(res.data.message)
                this.user.gender=item.name==='男'?1:0
            })
        },
        index(){
            this.$router.push('/index')
        },
        changePw(){
            this.show=false
            this.psc=true
        },
        reFn(){
            this.$router.push('/personal')
        },
        afterRead(file) {
        // 此时可以自行将文件上传至服务器
         let formData=new FormData()
         formData.append('file',file.file)

         upload(formData).then((res)=>{
             let head_img=res.data.data.url
             let data={head_img}
             userUpdate(this.id,data).then(()=>{
                userInfo(this.id).then((res)=>{
                this.user=res.data.data
                })
             })
         })
        },
        Dialog(){
            this.nicheng=this.user.nickname
            this.show=!this.show
        },
        upbutton(){
            if(this.nicheng===this.user.nickname) return;
            if(!this.nicheng){
                this.$toast.fail('昵称不能为空！')
                return
            }
            let data={nickname:this.nicheng}
            userUpdate(this.id,data).then(()=>{
                userInfo(this.id).then((res)=>{
                this.user=res.data.data
                console.log(this.user);
                })
             })
        },
        closeFn(action, done) {
            if (action === "confirm") { // 点击确定走这里
                if(this.nicheng===""){
                    done(false)
                }else{
                    done(true)
                }
            } else { // 点击取消走这里
              done(true) // 关闭弹窗, true可以省略
            }
        },
        upPas(){
             if(this.befroPs===''||this.newPs0===''||this.newPs1===''){
                this.$toast.fail('密码不能为空')
                return
            }
            if(this.user.password!==this.befroPs){
                this.$toast.fail('原密码不正确，请重新输入')
                return
            }
            if(this.befroPs===this.newPs0){
                this.$toast.fail('新密码不能与旧密码一致')
                return
            }
            if(this.newPs0!==this.newPs1){
                this.$toast.fail('确认密码有误')
                return
            }
            userUpdate(this.id,{password:this.newPs0}).then((res)=>{
                if(res.data.message==="修改成功"){
                    this.$toast.success(res.data.message)
                    this.befroPs=this.newPs0=this.newPs1=''
                }else{
                    this.$toast.fail(res.data.message)
                }
             })
        },
        closedFn(action,done){


            if(action==='confirm'){
            if(this.user.password!==this.befroPs){
                this.$toast.fail('原密码不正确，请重新输入')
                done(false)
            }
            if(this.befroPs===this.newPs0){
                this.$toast.fail('新密码不能与旧密码一致')
                done(false)
            }
            if(this.newPs0!==this.newPs1){
                this.$toast.fail('确认密码有误')
                done(false)
            }
            if(this.befroPs===''||this.newPs0===''||this.newPs1===''){
                this.$toast.fail('密码不能为空')
                done(false)
            }
            done(true)
            }else{
                done(true)
                this.befroPs=this.newPs0=this.newPs1=''
            }
        }
    },
    created(){
        userInfo(this.id).then((res)=>{
            this.user=res.data.data
        })
    }
}
</script>

<style lang="less" scoped>
/deep/ .van-nav-bar .van-icon {
    color: #666;
}
.head_img {
    height: 80px;
    width:80px;
    margin: 15px auto;
    position: relative;
    img{
        width: 100%;
        height: 100%;
    }
}
.van-uploader{
    position: absolute;
    top:0;
    left: 0;
    opacity: 0;
}

.van-cell{
    border-bottom: 1px solid rgba(102, 102, 102, 0.197);
}
</style>